<template>
	<div style="display: inline-block" @click="deleteInputEle">
		<span class="attr-item" style="width: 120px; white-space: nowrap">
			<a-input
				:disabled="disabled"
				v-model="attrValue"
				:placeholder="`赋值${attrInputCount}`"
				style="width: 120px"
			/>
			<!-- <span name="close-circle"> -->
			<!-- <a-icon type="close-circle" v-if="!disabled" class="close-circle" style="" /> -->
			<span
				v-if="!disabled"
				class="iconfont icon-shanchu"
				name="deleteInput"
			></span>
			<!-- </span> -->
		</span>
	</div>
</template>
<script>
	export default {
		props: {
			attrInputCount: {
				type: Number,
				default: 1,
			},
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				attrValue: "",
			}
		},
		methods: {
			deleteInputEle({ target }) {
				// let parentEle = target.parentNode.parentNode.parentNode.parentNode
				console.dir(target)
				if (target.getAttribute("name") === "deleteInput") {
					this.$emit("removeInput", this.attrInputCount)
				}
				// if (target["nodeName"] === "path" || target["nodeName"] === "svg") {
				// 	// let ele = this.$refs["close-input"]
				// 	ele.parentNode.removeChild(ele)
				// 	this.attrValue = ""
				// }
			},
		},
	}
</script>
<style scoped lang='less'>
	.attr-item {
		.icon-shanchu {
			color: #1890ff;
			margin-left: 10px;
			font-size: 12px;
			cursor: pointer;
		}
	}
</style>